<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>店铺管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            overflow: hidden;
        }
        
        .container {
            width: 100%;
            height: 100vh;
            background: white;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .container::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background: linear-gradient(45deg, #6c5ce7 0%, #00cec9 100%);
            border-radius: 0 0 0 100%;
            z-index: 0;
        }
        
        .header {
            padding: 25px 40px;
            border-bottom: 1px solid #e0e0e0;
            background: white;
            z-index: 10;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .page-title {
            font-size: 28px;
            font-weight: bold;
            color: #2d3436;
            position: relative;
            display: inline-block;
        }
        
        .page-title::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(to right, #6c5ce7, #00cec9);
            border-radius: 2px;
        }
        
        .main-content {
            display: flex;
            flex: 1;
            padding: 25px 40px;
            overflow: auto;
        }
        
        .content-wrapper {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .action-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 40px;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 25px;
            background: #f9f9f9;
        }
        
        .action-button {
            background: linear-gradient(135deg, #f6f9ff 0%, #e9f0ff 100%);
            border: 1px solid #dbe6ff;
            border-radius: 12px;
            padding: 20px 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            text-align: center;
        }
        
        .action-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }
        
        .action-button.active {
            border-color: #6c5ce7;
            background: linear-gradient(135deg, #e9f0ff 0%, #dbe6ff 100%);
            box-shadow: 0 6px 15px rgba(108, 92, 231, 0.2);
        }
        
        .shop-info-container {
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 30px;
            background: #f9f9f9;
            display: flex;
            gap: 40px;
        }
        
        .shop-details {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .detail-item {
            display: flex;
            align-items: center;
            font-size: 17px;
            padding: 15px;
            border-bottom: 1px dashed #e0e0e0;
        }
        
        .detail-item:last-child {
            border-bottom: none;
        }
        
        .shop-image {
            width: 220px;
            height: 220px;
            background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            text-align: center;
            padding: 10px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
            flex-shrink: 0;
        }
        
        .shop-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='rgba(255,255,255,0.1)' d='M0,0 L100,100 M100,0 L0,100' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3C/svg%3E");
            background-size: cover;
        }
        
        .icon {
            width: 28px;
            height: 28px;
            margin-bottom: 12px;
        }
        
        .field-label {
            font-weight: bold;
            min-width: 100px;
            color: #636e72;
        }
        
        .field-value {
            color: #2d3436;
            flex: 1;
        }
        
        .additional-info {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            margin-top: 40px;
        }
        
        .info-card {
            background: #f9f9f9;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .info-card h3 {
            margin-bottom: 15px;
            color: #6c5ce7;
        }
        
        .info-card .value {
            font-size: 32px;
            font-weight: bold;
            color: #2d3436;
        }
        
        .info-card .label {
            font-size: 14px;
            color: #636e72;
            margin-top: 5px;
        }
        
        @media (max-width: 1200px) {
            .shop-details {
                grid-template-columns: 1fr;
            }
            
            .additional-info {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 992px) {
            .action-buttons {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .shop-info-container {
                flex-direction: column;
            }
            
            .shop-image {
                width: 100%;
                height: 250px;
                margin-top: 20px;
            }
        }
        
        @media (max-width: 768px) {
            .additional-info {
                grid-template-columns: 1fr;
            }
            
            .header {
                padding: 20px;
            }
            
            .main-content {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="page-title">店铺管理系统</h1>
        </div>
        
        <div class="main-content">
            <div class="content-wrapper">
                <div class="action-buttons">
                    <div class="action-button">
                        <svg class="icon" viewBox="0 0 24 24" style="color: #6c5ce7;">
                            <path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
                        </svg>
                        <span>选择店铺</span>
                    </div>
                    
                    <div class="action-button">
                        <svg class="icon" viewBox="0 0 24 24" style="color: #00cec9;">
                            <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                        </svg>
                        <span>修改信息</span>
                    </div>
                    
                    <div class="action-button active">
                        <svg class="icon" viewBox="0 0 24 24" style="color: #ff7675;">
                            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                        </svg>
                        <span>进入店铺详情页</span>
                    </div>
                    
                    <div class="action-button">
                        <svg class="icon" viewBox="0 0 24 24" style="color: #fdcb6e;">
                            <path fill="currentColor" d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14V4zM6 7v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6z"/>
                        </svg>
                        <span>下架门店</span>
                    </div>
                </div>
                
                <div class="shop-info-container">
                    <div class="shop-details">
                        <div class="detail-item">
                            <span class="field-label">店铺名:</span>
                            <span class="field-value">优品生活馆</span>
                        </div>
                        
                        <div class="detail-item">
                            <span class="field-label">评分:</span>
                            <span class="field-value">4.8 (256条评价)</span>
                        </div>
                        
                        <div class="detail-item">
                            <span class="field-label">营业时间:</span>
                            <span class="field-value">09:00 - 22:00</span>
                        </div>
                        
                        <div class="detail-item">
                            <span class="field-label">地址:</span>
                            <span class="field-value">北京市朝阳区某某大街123号</span>
                        </div>
                        
                        <div class="detail-item">
                            <span class="field-label">店主:</span>
                            <span class="field-value">张经理</span>
                        </div>
                        
                        <div class="detail-item">
                            <span class="field-label">联系电话:</span>
                            <span class="field-value">138-8888-8888</span>
                        </div>
                        
                        <div class="detail-item">
                            <span class="field-label">店铺状态:</span>
                            <span class="field-value" style="color: #00b894;">营业中</span>
                        </div>
                        
                        <div class="detail-item">
                            <span class="field-label">创建时间:</span>
                            <span class="field-value">2023-05-12</span>
                        </div>
                    </div>
                    
                    <div class="shop-image">
                        店铺logo/照片
                    </div>
                </div>
                
                <div class="additional-info">
                    <div class="info-card">
                        <h3>今日订单</h3>
                        <div class="value">128</div>
                        <div class="label">较昨日 +12%</div>
                    </div>
                    
                    <div class="info-card">
                        <h3>本月销售额</h3>
                        <div class="value">¥86,540</div>
                        <div class="label">已完成目标的 72%</div>
                    </div>
                    
                    <div class="info-card">
                        <h3>客户满意度</h3>
                        <div class="value">96%</div>
                        <div class="label">行业平均 89%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 交互效果
        document.querySelectorAll('.action-button').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有按钮的active类
                document.querySelectorAll('.action-button').forEach(btn => {
                    btn.classList.remove('active');
                });
                
                // 为当前点击的按钮添加active类
                this.classList.add('active');
                
                // 根据按钮文本执行不同操作
                const buttonText = this.querySelector('span').textContent;
                switch(buttonText) {
                    case '选择店铺':
                        alert('打开店铺选择对话框');
                        break;
                    case '修改信息':
                        alert('打开店铺信息编辑页面');
                        break;
                    case '进入店铺详情页':
                        alert('跳转到店铺详情页面');
                        break;
                    case '下架门店':
                        if(confirm('确定要下架此门店吗？此操作不可撤销。')) {
                            alert('门店下架成功');
                        }
                        break;
                }
            });
        });
    </script>
</body>
</html>